<template>
	<div class="category" ref="category" @click="handlerClickActive($event)">
		<div class="category-btn" v-for="value in 10" :key="value" :class="{ active: value === 1 }" ref="btns">
			<div>1 新注册2222222222222222</div>
		</div>
	</div>
	<div class="open">
		<button @click="handleClick" class="open-btn">
			{{ (isOpen ? '收起' : '展开') + '全部' }}&nbsp;&nbsp;
			<el-icon><ArrowDown v-if="!isOpen" /> <ArrowUp v-else /></el-icon>
		</button>
	</div>
</template>

<script setup>
	import { ArrowDown, ArrowUp } from '@element-plus/icons-vue';
	const category = useTemplateRef('category');
	const isOpen = ref(false);
	let btns = useTemplateRef('btns');
	function handlerClickActive(e) {
		for (let i = 0; i < btns.value.length; i++) {
			if (btns.value[i] === e.target) {
				btns.value[i].classList.add('active');
			} else {
				btns.value[i].classList.remove('active');
			}
		}
	}
	function handleClick() {
		isOpen.value = !isOpen.value;
		if (isOpen.value) {
			category.value.style.height = category.value.scrollHeight + 'px';
		} else {
			category.value.style.height = '140px';
		}
	}
</script>

<style lang="scss" scoped>
	.test {
		width: 200px;
		height: 200px;
		@include text-overflow();
	}
	.category {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		row-gap: 19px;
		column-gap: 14px;
		transition: all 0.5s;
		height: 60px;
		overflow: hidden;
		.category-btn {
			// flex: 0 0 220px;
			@include flex;
			@include font(_, 26px, _, 400, var(--issue-text-mobile-category-color));
			@include text-overflow();
			padding: 0 20px;
			height: 60px;
			background-color: var(--issue-bg-mobile-category-btn-color);
			border-radius: var(--issue-text-mobile-category-btn-radius);
			&.active {
				background-color: var(--issue-bg-mobile-category-btn-active-color);
				color: var(--issue-text-mobile-category-btn-active-color);
			}
			div{
				@include text-overflow();
			}
		}
	}
	.open {
		width: 100%;
		@include flex();
		margin-top: 20px;
		margin-bottom: 30px;
		.open-btn {
			border: none;
			background: var(--issue-bg-mobile-color);
			@include font(_, 26px, _, 400, var(--issue-bg-mobile-category-btn-active-color));
		}
	}
</style>
